<template>
  <div style="position: fixed; background-color: floralwhite;
  width: 100%;margin: 0 auto;top: 0;left: 0;bottom: 0"
  >
    <el-form
        status-icon
        :model="user"
        ref="ruleForm"
        class="login-form"
    >
      <span style="font-weight: bold; font-size: 1.5rem;">共享单车管理系统</span>
      <el-form-item style="margin-top: 20px">
        <el-input
            v-model="user.username"
            prefix-icon="el-icon-user-solid"
            placeholder="账号"
            @keyup.enter.native="login"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
            v-model="user.password"
            prefix-icon="el-icon-lock"
            show-password
            placeholder="密码"
            @keyup.enter.native="login"
        />
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "login",
  methods: {
    login(){
      this.postRequest(this.$api.login,this.user).then(res => {
        if (res){
          sessionStorage.setItem("user",JSON.stringify(res.obj))
          this.$router.push("/home")
        }
      })
    }
  },
  data() {
    return {
      user:{
        username:"",
        password:"",
      }
    }
  }
}
</script>

<style scoped>
.login-form{
  width: 300px;
  border-radius: 10px;
  margin: 30vh auto;
}
</style>